<style>
.layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}
.layout-logo{
    width: 270px;
    height: 35px;
    background: #f7f8f9;
    color:#060606;
    border-radius: 3px;
    float: left;
    position: absolute;
    align-items: center;
    text-align: center;
    font-family: Alimama ShuHeiTi;
    font-size: 25px;
    font-weight: bold;
    line-height: normal;
    text-align: center;
    letter-spacing: 0em;
    top:17px;
    left:20px;
}
.layout-nav{
    width: 420px;
    margin: 0 auto;
    margin-right: 20px;
}
</style>
<template>
    <div class="layout">
        <Layout>
            <Header>
                <Menu mode="horizontal" theme="dark" active-name="1">
                  <div class="layout-logo">学生成绩管理系统</div>
                    <div class="layout-nav">
                        <MenuItem name="1">
                            <Icon type="ios-navigate"></Icon>
                            学生管理
                        </MenuItem>
                        <MenuItem name="2">
                            <Icon type="ios-keypad"></Icon>
                            成绩管理
                        </MenuItem>
                        <MenuItem name="3">
                            <Icon type="ios-analytics"></Icon>
                            课程管理
                        </MenuItem>
                        <MenuItem name="4">
                            <Icon type="ios-paper"></Icon>
                            日志审计
                        </MenuItem>
                    </div>
                </Menu>
            </Header>
            <Layout>
                <Sider hide-trigger :style="{background: '#fff'}">
                    <Menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
                      <Submenu name="1">
                            <template #title>
                                <Icon type="ios-navigate"></Icon>
                                学生管理
                            </template>
                            <MenuItem name="1-1"><router-link to="infor">查看个人信息</router-link></MenuItem>
                            <MenuItem name="1-2"><router-link to="cginfor">修改个人信息</router-link></MenuItem>
                            <MenuItem name="1-3"><router-link to="grade">查看成绩表</router-link></MenuItem>
                        </Submenu>
                        <Submenu name="2">
                            <template #title>
                                <Icon type="ios-keypad"></Icon>
                                成绩管理
                            </template>
                            <MenuItem name="2-1"><router-link to="gradelis">成绩分析</router-link></MenuItem>
                            <MenuItem name="2-2"><router-link to="home">查看成绩表</router-link></MenuItem>
                        </Submenu>
                        <Submenu name="3">
                            <template #title>
                                <Icon type="ios-analytics"></Icon>
                                课程管理
                            </template>
                            <MenuItem name="3-1"><router-link to="course">查看课程表</router-link></MenuItem>
                            <MenuItem name="3-2"><router-link to="cgcourse">修改课程表</router-link></MenuItem>
                        </Submenu>
                        <Submenu name="4">
                            <template #title>
                                <Icon type="ios-analytics"></Icon>
                                日志审计
                            </template>
                        </Submenu>
                    </Menu>
                </Sider>
                <Layout :style="{padding: '0 24px 24px'}">
                    <Breadcrumb :style="{margin: '24px 0'}">
                        <BreadcrumbItem>主页</BreadcrumbItem>
                    </Breadcrumb>
                    <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
                      <Table :columns="columns" :data="data" size="small" ref="table"></Table>
    <Space class="ivu-mt" wrap>
        <Button type="primary" @click="exportData(1)"><Icon type="ios-download-outline"></Icon> Export source data</Button>
        <Button type="primary" @click="exportData(2)"><Icon type="ios-download-outline"></Icon> Export sorting and filtered data</Button>
        <Button type="primary" @click="exportData(3)"><Icon type="ios-download-outline"></Icon> Export custom data</Button> 
    </Space>
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                columns: [
                    {
                        "title": "Name",
                        "key": "name",
                        "fixed": "left",
                        "width": 200
                    },
                    {
                        "title": "学号",
                        "key": "学号",
                        "width": 150,
                        "sortable": true,
                        filters: [
                            {
                                label: 'Greater than 20221500',
                                value: 1
                            },
                            {
                                label: 'Less than 20221500',
                                value: 2
                            }
                        ],
                        filterMultiple: false,
                        filterMethod (value, row) {
                            if (value === 1) {
                                return row.show > 20221500;
                            } else if (value === 2) {
                                return row.show < 20221500;
                            }
                        }
                    },
                    {
                        "title": "班级",
                        "key": "班级",
                        "width": 150,
                        "sortable": true
                    },
                    {
                        "title": "java程序设计",
                        "key": "java",
                        "width": 150,
                        "sortable": true
                    },
                    {
                        "title": "C#",
                        "key": "C#",
                        "width": 150,
                        "sortable": true
                    },
                    {
                        "title": "计算机网络",
                        "key": "计算机网络",
                        "width": 150,
                        "sortable": true
                    },
                    {
                        "title": "数据结构",
                        "key": "数据结构",
                        "width": 150,
                        "sortable": true
                    },
                    {
                        "title": "运筹学",
                        "key": "运筹学",
                        "width": 150,
                        "sortable": true
                    },
                    {
                        "title": "学分",
                        "key": "学分",
                        "width": 150,
                        "sortable": true
                    },
                    {
                        "title": "学时",
                        "key": "学时",
                        "width": 150,
                        "sortable": true
                    },
                    {
                        "title": "上课方式",
                        "key": "上课方式",
                        "width": 150,
                        "sortable": true
                   }
                    
                ],
                data: [
                    {
                        "name": "李华",
                        "fav": 0,
                        "班级":"信管",
                        "学号":20220001,
                        "java": 72,
                        "学分": 4,
                        "学时": 54,
                        "C#":60,
                        "学分": 4,
                        "学时": 54,
                        "计算机网络":65,
                        "学分":4,
                        "学时":54,
                        "数据结构":73,
                        "学分":3,
                        "学时":54,
                        "运筹学":60,
                        "学分":2,
                        "学时":36,
                        "上课方式": "线下"
                        
                    },
                    {
                       "name": "张三",
                        "fav": 0,
                        "班级":"信管",
                        "学号":20220002,
                        "java": 63,
                        "学分": 4,
                        "学时": 54,
                        "C#":70,
                        "学分": 4,
                        "学时": 54,
                        "计算机网络":76,
                        "学分":4,
                        "学时":54,
                        "数据结构":80,
                        "学分":3,
                        "学时":54,
                        "运筹学":71,
                        "学分":2,
                        "学时":36,
                        "上课方式": "线下"
                    },
                    {
                        "name": "李四",
                        "fav": 0,
                        "班级":"软件工程",
                        "学号":20220901,
                        "java": 61,
                        "学分": 4,
                        "学时": 54,
                        "C#":90,
                        "学分": 4,
                        "学时": 54,
                        "计算机网络":88,
                        "学分":4,
                        "学时":54,
                        "数据结构":60,
                        "学分":3,
                        "学时":54,
                        "运筹学":62,
                        "学分":2,
                        "学时":36,
                        "上课方式": "线下"
                    },
                    {
                       "name": "何超",
                        "fav": 0,
                        "班级":"信管",
                        "学号":20220006,
                        "java": 75,
                        "学分": 4,
                        "学时": 54,
                        "C#":65,
                        "学分": 4,
                        "学时": 54,
                        "计算机网络":68,
                        "学分":4,
                        "学时":54,
                        "数据结构":77,
                        "学分":3,
                        "学时":54,
                        "运筹学":72,
                        "学分":2,
                        "学时":36,
                        "上课方式": "线下"
                    },
                    {
                        "name": "张伟",
                        "fav": 0,
                        "班级":"医疗信息技术",
                        "学号":20220801,
                        "java": 63,
                        "学分": 4,
                        "学时": 54,
                        "C#":60,
                        "学分": 4,
                        "学时": 54,
                        "计算机网络":75,
                        "学分":4,
                        "学时":54,
                        "数据结构":80,
                        "学分":3,
                        "学时":54,
                        "运筹学":60,
                        "学分":2,
                        "学时":36,
                        "上课方式": "线下"
                    },
                    {
                        "name": "张欣",
                        "fav": 0,
                        "班级":"信管",
                        "学号":20220010,
                        "java": 72,
                        "学分": 4,
                        "学时": 54,
                        "C#":88,
                        "学分": 4,
                        "学时": 54,
                        "计算机网络":65,
                        "学分":4,
                        "学时":54,
                        "数据结构":73,
                        "学分":3,
                        "学时":54,
                        "运筹学":60,
                        "学分":2,
                        "学时":36,
                        "上课方式": "线下"
                    },
                    {
                        "name": "王鑫",
                        "fav": 0,
                        "班级":"信管",
                        "学号":20220904,
                        "java": 65,
                        "学分": 4,
                        "学时": 54,
                        "C#":60,
                        "学分": 4,
                        "学时": 54,
                        "计算机网络":66,
                        "学分":4,
                        "学时":54,
                        "数据结构":73,
                        "学分":3,
                        "学时":54,
                        "运筹学":78,
                        "学分":2,
                        "学时":36,
                        "上课方式": "线下"
                    },
                    {
                        "name": "王亮",
                        "fav": 0,
                        "班级":"软件工程",
                        "学号":20220909,
                        "java": 72,
                        "学分": 4,
                        "学时": 54,
                        "C#":60,
                        "学分": 4,
                        "学时": 54,
                        "计算机网络":88,
                        "学分":4,
                        "学时":54,
                        "数据结构":73,
                        "学分":3,
                        "学时":54,
                        "运筹学":60,
                        "学分":2,
                        "学时":36,
                        "上课方式": "线下"
                    },
                    {
                        "name": "赵梓涵",
                        "fav": 0,
                        "班级":"软件工程",
                        "学号":20220910,
                        "java": 72,
                        "学分": 4,
                        "学时": 54,
                        "C#":60,
                        "学分": 4,
                        "学时": 54,
                        "计算机网络":90,
                        "学分":4,
                        "学时":54,
                        "数据结构":73,
                        "学分":3,
                        "学时":54,
                        "运筹学":61,
                        "学分":2,
                        "学时":36,
                        "上课方式": "线下"
                    },
                    {
                        "name": "李雨轩",
                        "fav": 0,
                        "班级":"信管",
                        "学号":20220018,
                        "java": 72,
                        "学分": 4,
                        "学时": 54,
                        "C#":69,
                        "学分": 4,
                        "学时": 54,
                        "计算机网络":65,
                        "学分":4,
                        "学时":54,
                        "数据结构":73,
                        "学分":3,
                        "学时":54,
                        "运筹学":82,
                        "学分":2,
                        "学时":36,
                        "上课方式": "线下"
                    },
                    {
                      "name": "刘晨曦",
                        "fav": 0,
                        "班级":"医疗信息技术",
                        "学号":20220808,
                        "java": 72,
                        "学分": 4,
                        "学时": 54,
                        "C#":76,
                        "学分": 4,
                        "学时": 54,
                        "计算机网络":65,
                        "学分":4,
                        "学时":54,
                        "数据结构":73,
                        "学分":3,
                        "学时":54,
                        "运筹学":68,
                        "学分":2,
                        "学时":36,
                        "上课方式": "线下"
                    }
                ]
            }
        },
        methods: {
            exportData (type) {
                if (type === 1) {
                    this.$refs.table.exportCsv({
                        filename: 'The original data'
                    });
                } else if (type === 2) {
                    this.$refs.table.exportCsv({
                        filename: 'Sorting and filtering data',
                        original: false
                    });
                } else if (type === 3) {
                    this.$refs.table.exportCsv({
                        filename: 'Custom data',
                        columns: this.columns8.filter((col, index) => index < 4),
                        data: this.data7.filter((data, index) => index < 4)
                    });
                }
            }      
        }
    }
</script>